<template>
	<view class="map_page">
		<view class="map_container">
			<map
				id="map"
				style="width: 100%;"
				:style="{ height: height + 'rpx' }"
				:latitude="latitude"
				:longitude="longitude"
				:enable-3D="true"
				:show-compass="true"
				:enable-traffic="true"
				:enable-building="true"
				:show-location="true"
				:scale="12"
				:markers="markers"
				:enable-poi="true"
				:layer-style="'2'"
				:polyline="polyline"
			></map>
			<view class="map_tip">
				<view class="info">
					<view class="map_tip_text" v-if="name">
						<view class="label">目标名称：</view>
						{{ name }}
					</view>
					<view class="map_tip_text" v-if="address">
						<view class="label">目标地址：</view>
						{{ address }}
					</view>
					<view class="map_tip_text" v-if="distance">
						<view class="label">行驶距离：</view>
						{{ distance }}
					</view>
					<view class="map_tip_text" v-if="cost">
						<view class="label">打车价格：</view>
						{{ cost }}
					</view>
					<view class="steps">
						<view class="steps_title" @click="openDetailHandle">路线详情</view>
						<view class="steps_item" v-show="showDetail">
							<view v-for="(step, index) in steps" class="steps_item_column">{{index+1}}：{{step.instruction}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			height: 600,
			latitude: getApp().globalData.latitude,
			longitude: getApp().globalData.longitude,
			covers: [],
			markers: [],
			name: '',
			address: '',
			polyline: [],
			distance: '',
			cost: '',
			myAmap: null,
			steps:[],
			showDetail:true
		};
	},
	onLoad(ops) {
		let that = this;
		console.log(ops);
		this.type = ops.t;
		this.destinationLatitude = ops.lat;
		this.destinationLongitude = ops.lon;
		this.name = ops.name;
		this.address = ops.address;

		this.myAmap = new this._amap.AMapWX({ key: '350d9b19fe28da7951c1b80189b2338f' });
		if (!this.myAmap) return;
		uni.getSystemInfo({
			success(res) {
				that.height = (res.windowHeight-80) * 2;
				// uni.getLocation({
				// 	success(res) {
				// 		that.latitude = res.latitude;
				// 		that.longitude = res.longitude;
				// 	}
				// });
			}
		});
		this.myAmap.getRegeo({
			success(res) {
				that.latitude = res[0].latitude;
				that.longitude = res[0].longitude;
				that.markers = [
					{ id: 0, latitude: that.latitude, longitude: that.longitude, width: 22, height: 32 },
					{ id: 1, latitude: that.destinationLatitude, longitude: that.destinationLongitude, width: 22, height: 32 }
				];
				if (that.type === 'route') {
					let origin = [that.longitude, that.latitude].join(','),
						destination = [that.destinationLongitude, that.destinationLatitude].join(',');
					that.myAmap.getDrivingRoute({
						origin: origin,
						destination: destination,
						success(data) {
							console.log(data)
							var points = [];
							if (data.paths && data.paths[0] && data.paths[0].steps) {
								var steps = data.paths[0].steps;
								for (var i = 0; i < steps.length; i++) {
									var poLen = steps[i].polyline.split(';');
									for (var j = 0; j < poLen.length; j++) {
										points.push({
											longitude: parseFloat(poLen[j].split(',')[0]),
											latitude: parseFloat(poLen[j].split(',')[1])
										});
									}
								}
							}
							that.polyline = [
								{
									points: points,
									color: '#0091ff',
									width: 6,
									arrowLine: true
								}
							];
							that.steps = data.paths[0] && data.paths[0].steps;
							if (data.paths[0] && data.paths[0].distance) {
								that.distance = data.paths[0].distance + '米';
							}
							if (data.taxi_cost) {
								that.cost = '打车约' + parseInt(data.taxi_cost) + '元';
							}
						},
						fail(err) {
							console.log(err);
						}
					});
				}
			}
		});
		//console.log(that.latitude, that.longitude);
	},
	methods:{
		openDetailHandle(){
			this.showDetail = this.showDetail ? false :true;
		}
	}
};
</script>

<style lang="less">
.map_page {
	.map_container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		.map_tip {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 20rpx 40rpx 20rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #ffffff;
			font-size: 28rpx;
			display: flex;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			.info {
				flex: 1;
				.map_tip_text {
					display: flex;
					align-items: center;
					.label {
						width: 160rpx;
						color:#CCCCCC;
					}
				}
				.steps{
					margin:20rpx 0;
					background-color: #FFFFFF;
					color:#333333;
					padding:20rpx;
					border-radius: 10rpx;
					height:300rpx;
					overflow:scroll;
					overflow-x: hidden;
					.steps_title{
						text-decoration: underline;
						display:inline;
					}
					.steps_item{
						.steps_item_column{
							padding:10rpx 0;
						}
					}
				}
			}
		}
	}
}
</style>
